<template>
  <div>
    <!-- 登录框 -->

    <el-dialog
      :width="500"
      :height="670"
      draggable="true"
      class="dialogVisible"
      style="border-radius: 10px"
      :model-value="isShowDrawer"
      :before-close="closeDrawer"
    >
      <template #header>
        <!-- <div class="xx"></div> -->
        <span class="dialog-header">
          <button class="LoGoTop">
            <img
              src="../../assets/img/Logo.png"
              style="width: 100%; height: 100%"
            />
          </button>
        </span>
      </template>
      <!-- tab切换 -->
      <div>
        <el-tabs
          v-model="activeName1"
          class="demo-tabs"
          @tab-click="handleClick"
          style="margin: 5px 0 0 40px"
        >
          <el-tab-pane label="验证码登录" name="first">
            <!-- 未注册的手机号码将自动注册为用户  -->
            <div class="title">未注册的手机号码将自动注册为用户</div>

            <!-- 手机号码 -->
            <div class="phone">
              <img
                src="../../assets/img/phone.png"
                style="width: 14px; height: 14px; margin-right: 4px"
              />
              <span class="tel">手机号码</span>
            </div>
            <!-- from表单 -->
            <el-form :model="form" :rules="rules" ref="ruleFormRef">
              <!--  -->
              <el-form-item prop="tel">
                <el-input
                  v-model="form.tel"
                  class="input_shuru"
                  placeholder="请填写手机号码"
                />
              </el-form-item>

              <!-- <el-form-item>
                <div class="mi-captchas">
                  <mi-captcha
                    theme-color="#6675ff"
                    border-color="#eeeeee"
                    box-shadow-color="#eeeeee"
                    bgColor="#eeeeee"
                    radius="5"
                    textColor="#6675ff"
                    width="420"
                    height="50px"
                  />
                </div>
              </el-form-item> -->

              <div class="phone">
                <img
                  src="../../assets/img/yzm.png"
                  style="width: 14px; height: 14px; margin-right: 4px"
                />
                <span class="tel">验证码</span>
              </div>

              <el-form-item class="poDing" prop="code">
                <el-input
                  v-model="form.code"
                  class="input_shuru"
                  placeholder="请填写验证码"
                />
                <div class="inp_yzm" @click="countDown()">
                  {{ content }}
                </div>
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  @click="submitForm(ruleFormRef)"
                  class="login_register"
                  >登录/注册</el-button
                >
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="密码登录" name="second">
            <!-- 手机号码 -->
            <div class="phone">
              <img
                src="../../assets/img/phone.png"
                style="width: 14px; height: 14px; margin-right: 4px"
              />
              <span class="tel">手机号码</span>
            </div>

            <!-- from表单 -->
            <el-form :model="form" :rules="rules" ref="ruleFormRef1">
              <el-form-item prop="account">
                <el-input
                  v-model="form.account"
                  class="input_shuru"
                  placeholder="请填写手机号码"
                />
              </el-form-item>

              <div class="phone">
                <img
                  src="../../assets/img/password.png"
                  style="width: 14px; height: 14px; margin-right: 4px"
                />
                <span class="tel">密码</span>
              </div>

              <el-form-item class="poDing" prop="userpwd">
                <el-input
                  v-model="form.userpwd"
                  class="input_shuru"
                  placeholder="请填写密码"
                  type="password"
                />
              </el-form-item>

              <!-- 记住密码 -->
              <div style="display: flex; align-items: center">
                <div>
                  <input type="checkbox" style="vertical-align: middle" />
                  <span style="margin-left: 6px">记住密码</span>
                </div>
                <div class="password_no" @click="forgot()">忘记密码</div>
              </div>
              <!-- 记住密码 -->

              <el-form-item>
                <el-button
                  type="primary"
                  class="login_register"
                  @click="submitForm1(ruleFormRef1)"
                >
                  登录/注册
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>

    <!-- 忘记密码 -->
    <el-dialog
      v-model="dialogVisible1"
      :width="500"
      :height="640"
      draggable="true"
      style="border-radius: 10px"
      modal="false"
    >
      <template #header>
        <span class="dialog-header">
          <button class="LoGoTop">LoGo</button>
        </span>
      </template>
      <!-- tab切换 -->
      <div>
        <!-- <img
          src="../../assets/img/Logo.png"
          style="width: 150px; height: 38px"
        /> -->
        <el-tabs
          v-model="activeName"
          class="demo-tabs"
          @tab-click="handleClick"
          style="margin: 5px 0 0 40px"
        >
          <el-tab-pane label="找回密码" name="first">
            <!-- 手机号码 -->
            <div class="phone">
              <img
                src="../../assets/img/phone.png"
                style="width: 14px; height: 14px; margin-right: 4px"
              />
              <span class="tel">手机号码</span>
            </div>
            <!-- from表单 -->
            <el-form :model="form" :rules="rules" ref="ruleFormRef2">
              <el-form-item prop="tel">
                <el-input
                  v-model="form.tel"
                  class="input_shuru"
                  placeholder="请填写手机号码"
                />
              </el-form-item>

              <div class="phone">
                <img
                  src="../../assets/img/yzm.png"
                  style="width: 14px; height: 14px; margin-right: 4px"
                />
                <span class="tel">验证码</span>
              </div>

              <el-form-item class="poDing" prop="code">
                <el-input
                  v-model="form.code"
                  class="input_shuru"
                  placeholder="请填写验证码"
                />
                <div class="inp_yzm" @click="countDown()">
                  {{ content }}
                </div>
              </el-form-item>

              <div class="phone">
                <img
                  src="../../assets/img/password.png"
                  style="width: 14px; height: 14px; margin-right: 4px"
                />
                <span class="tel">密码</span>
              </div>
              <el-form-item prop="userpwd">
                <el-input
                  v-model="form.userpwd"
                  class="input_shuru"
                  placeholder="请填写密码"
                />
              </el-form-item>

              <el-form-item>
                <el-button
                  type="primary"
                  class="login_register"
                  @click="submitForm2(ruleFormRef2)"
                >
                  提交
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs } from "vue";
import type { TabsPaneContext } from "element-plus";
import {
  getLogin,
  getLoginPassword,
  getCode,
  getforgotPassword,
} from "../../Api/login/login";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();

// pinia
import { useCounterStore } from "../../pain/login/login";
import { storeToRefs } from "pinia";
const store = useCounterStore();
const { vipw } = storeToRefs(store);
const { vip } = storeToRefs(store);
const { user } = storeToRefs(store);
const { userLogin } = storeToRefs(store);

//父传子弹框
const props = defineProps({
  isShowDrawer: Boolean,
});
const { isShowDrawer } = toRefs(props);
const emit = defineEmits(["closeDrawer"]);

// 关闭弹窗的方法
function closeDrawer() {
  emit("closeDrawer");
}
// 验证
const ruleFormRef = ref();
const ruleFormRef1 = ref();
const ruleFormRef2 = ref();

// 忘记密码
const dialogVisible1 = ref(false);

// tab切换
const activeName = ref("first");

// 忘记密码tab切换
const activeName1 = ref("first");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  //   console.log(tab, event);
};

// 验证码
const content = ref("发送验证码"); // 按钮里显示的内容
const totalTime = ref(60); //记录具体倒计时时间
const canClick = ref(true);

//  登录 表单
const form = reactive({
  code: "", //验证码
  tel: "", //手机号
  userpwd: "",
  account: "", //手机号
});

// 表单验证
const rules = reactive({
  tel: [
    { required: true, message: "请填写手机号", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "手机号码格式不正确",
      trigger: "blur",
    },
  ],

  code: [{ required: true, message: "请填写验证码", trigger: "blur" }],

  account: [
    { required: true, message: "请填写手机号", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "手机号码格式不正确",
      trigger: "blur",
    },
  ],

  userpwd: [{ required: true, message: "请填写密码", trigger: "blur" }],
});

// 获取验证码
const countDown = () => {
  getCode(form).then((res) => {
    console.log(res);
    if (res.data.code != 1) {
      ElMessage.error(res.data.msg);
      // 存token
      window.localStorage.setItem("token", JSON.stringify(form));
    } else {
      ElMessage({
        message: res.data.msg,
        type: "success",
      });
    }
  });
  if (!canClick.value) return;
  canClick.value = false;
  content.value = totalTime.value + "s后重新发送";
  let clock = window.setInterval(() => {
    totalTime.value--;
    content.value = totalTime.value + "s后重新发送";
    if (totalTime.value < 0) {
      window.clearInterval(clock);
      content.value = "重新发送验证码";
      totalTime.value = 60;
      canClick.value = true;
    }
  }, 1000);
};

// 注册登录确定
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      getLogin(form).then((res) => {
        console.log(res);
        if (res.data.code != 1) {
          ElMessage.error(res.data.msg);
        } else {
          ElMessage({
            message: res.data.msg,
            type: "success",
          });
          // 关闭弹框
          closeDrawer();
          // 存token
          window.localStorage.setItem("token", JSON.stringify(form));
          // 跳转
          // router.push("/");
          // 清空表单
          ruleFormRef.value.resetFields();
          // 开启图片
          if (localStorage.getItem("token")) {
            vipw.value = false;
            vip.value = true;
            user.value = true;
            userLogin.value = false;
          } else {
            vipw.value = true;
            vip.value = false;
            user.value = false;
            userLogin.value = true;
          }
        }
      });
    }
  });
};

// 密码登录确定
const submitForm1 = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      getLoginPassword(form).then((res) => {
        console.log(res);
        if (res.data.code != 1) {
          ElMessage.error(res.data.msg);
        } else {
          ElMessage({
            message: res.data.msg,
            type: "success",
          });
          // 存token
          window.localStorage.setItem("token", JSON.stringify(form));
          // 关闭弹框
          closeDrawer();
          // 跳转
          // router.push("/");
          // 清空表单
          ruleFormRef.value.resetFields();
          // 图片判断
          if (localStorage.getItem("token")) {
            vipw.value = false;
            vip.value = true;
            user.value = true;
            userLogin.value = false;
          } else {
            vipw.value = true;
            vip.value = false;
            user.value = false;
            userLogin.value = true;
          }
        }
      });
    }
  });
};

// 忘记密码提交
const submitForm2 = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      getforgotPassword(form).then((res) => {
        console.log(res);
        if (res.data.code != 1) {
          ElMessage.error(res.data.msg);
        } else {
          ElMessage({
            message: res.data.msg,
            type: "success",
          });
          // 关闭弹框
          closeDrawer();
          // 存token
          window.localStorage.setItem("token", JSON.stringify(form));
          // 跳转
          // router.push("/");
          // 清空表单
          ruleFormRef.value.resetFields();
        }
      });
    }
  });
};

// 忘记密码弹框
const forgot = () => {
  closeDrawer();
  dialogVisible1.value = true;
};
</script>
<style>
.el-dialog__body {
  padding: 0 !important;
}
/* tabs */
.deleteBorder .el-tabs__nav-wrap::after {
  height: 0 !important;
}

.deleteBorder .el-tabs__active-bar {
  background: transparent !important;
}

.mi-captcha-radar-logo {
  display: none;
}

/*去掉tabs底部的下划线*/
</style>
<style lang="scss" scoped>
:deep(.el-tabs__nav-wrap::after) {
  position: static;
}
/* input边框 */
:deep(.el-input__wrapper) {
  box-shadow: none !important;
  border-bottom: 1px solid #000;
  border-radius: 0 !important;
}

// 高度 tabls
:deep(.el-tabs__content) {
  height: 400px !important;
  margin-top: 10px;
}
.LoGoTop {
  width: 126px;
  height: 32px;
  background-color: #fff;
  border: 0;
  color: #fff;
  margin-top: 10px;
  margin-left: 20px;
}

.xx {
  width: 100%;
  height: 1px;
  border-bottom: 1px dotted #000;
}

// title内容
.title {
  font-size: 14px;
  font-weight: 400;
  color: #a9b1be;
  margin-bottom: 50px;
}

// 手机号
.phone {
  display: flex;
  align-items: center;
  .tel {
    width: 56px;
    height: 14px;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
}
// 输入框
.input_shuru {
  width: 420px;
  margin-top: 20px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  // border-bottom: 1px solid #a9b1be !important;
  outline: none;
  font-size: 16px;
  padding-bottom: 10px;
}
input::-webkit-input-placeholder {
  color: #a9b1be;
}

// 验证码
.poDing {
  position: relative;
}
.inp_yzm {
  color: #6675ff;
  position: absolute;
  right: 45px;
  top: 20px;
  cursor: pointer;
}

// 滑块验证
.mi-captchas {
  margin: 5px 0;
}

.mi-captcha-modal-copyright {
  display: none;
}
.question-circle {
  display: none;
}
// 登录注册
.login_register {
  width: 420px;
  height: 50px;
  background: #6675ff;
  opacity: 1;
  border-radius: 4px;
  margin-top: 40px;
  margin-bottom: 50px;
}

//忘记密码
.password_no {
  margin-left: 288px;
  color: #6675ff;
  font-size: 14px;
  cursor: pointer;
}
</style>
